<template>
	<div page="user-info" class='container-padding container-bottom'>
		<nav-header ></nav-header>
		<div class='user-info-list'>
			<div class='item'>
				<div class='user-info-span'>
					<span class='title'>个人头像</span>
					<div class='user-pic'>
						<img class="user-portrait" :src="userInfo.appdata.headimgurl" />
					</div>
					<!-- <img src='../../../static/img/data/portrait.jpeg' class='user-pic' /> -->
				</div>
				<img src='../../../static/img/triangle.svg' class='icon-triangle' />
			</div>

			<div class='item' @click="changeName">
				<div class='user-info-span'>
					<span class='title'>昵称</span>
					<div class='content'>
						{{userInfo.appdata.nickname}}
					</div>
				</div>
				<img src='../../../static/img/triangle.svg' class='icon-triangle' />
			</div>

			<div mode="date" @click="setData">
				<div class='item'>
					<div class='user-info-span'>
						<span class='title'>生日</span>
						<span class='content'>{{date}}</span>
					</div>
					<img src='../../../static/img/triangle.svg' class='icon-triangle' />
				</div>
			</div>

			<div class='item'>
				<div class='user-info-span'>
					<span class='title'>性别</span>
					<div class='content'>
						{{userInfo.appdata.sex == 1?"M":"S"}}
					</div>
				</div>
				<img src='../../../static/img/triangle.svg' class='icon-triangle' />
			</div>

			<div class='item'>
				<div class='user-info-span'>
					<span class='title'>绑定手机</span>
					<span class='content'>未设置</span>
				</div>
				<img src='../../../static/img/triangle.svg' class='icon-triangle' />
			</div>
		</div>
		<div class="user-info-foot" @click="loginOut">
			<div class="log-out">
				退出登陆
			</div>
		</div>
		<change-name v-if="showChangeName" @hideChangeName="hideChangeName"></change-name>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import { Toast } from 'mint-ui';
	import { mapGetters, mapState, mapActions } from 'vuex';
	import changeName from "@/pages/user-info/components/change-name"
	export default {
		data() {
			return {
				date: "未设置",
				showChangeName: false
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		mounted() {

		},
		methods: {
			changeName() {
				this.showChangeName = true;
			},
			hideChangeName(val) {
				this.showChangeName = val;
			},
			setData() {
				this.$picker.show({
					type: 'datePicker',
					onOk: (date) => {
						console.log(date)
						this.date = date
					}
				});

			},
			loginOut() {
				var _this = this;
				if(auths == null){
					Toast("您还未登陆！")
					return;
				}
				for(var i in auths) {
					var s = auths[i];
					if(s.authResult) {
						s.logout(function(e) {
							// 退出登陆 数据恢复默认
							_this.$store.state.userInfo = null;
							_this.$router.push("/index")
							alert("注销登录认证成功！");
						}, function(e) {
							console.log(JSON.stringify(e))
							alert("注销登录认证失败！");
						});
					}
				}

			},
		},
		components: {
			"nav-header": header,
			"change-name": changeName
		}
	}
</script>

<style lang="scss" scoped>
	.container-bottom {
		margin: 90px 0 100px;
		padding: 0 40px;
		.user-info-list {
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 140px;
				box-shadow: 0 1px 0 #e5e5e5;
				.user-info-span {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 100%;
					padding-right: 50px;
					.title {
						color: #4a4a4a;
						font-size: 30px;
					}
					.user-pic {
						overflow: hidden;
						width: 100px;
						height: 100px;
						border-radius: 50%;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.content {
						font-size: 30px;
						color: #9B9B9B;
						letter-spacing: -0.5px;
					}
				}
			}
		}
		.user-info-foot {
			position: fixed;
			bottom: 90px;
			left: 0;
			padding: 0 38px;
			box-sizing: border-box;
			width: 100%;
			.log-out {
				width: 100%;
				height: 88px;
				line-height: 88px;
				text-align: center;
				background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
				color: #fff;
				font-size: 36px;
				border-radius: 8px;
			}
		}
	}
</style>